<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">

                <el-form-item label="订单号">
                    <el-input v-model="filters.orderId" placeholder="订单号"></el-input>
                </el-form-item>
                <el-form-item label="订单金额">
                    <el-input v-model="filters.orderAmount" placeholder="订单金额"></el-input>
                </el-form-item>

                <el-form-item label="订单状态" prop="orderState">
                    <!--订单状态 1 未支付  0 等待支付 2 支付成功 3 支付失败 4 充值成功 5 充值失败-->
                    <el-select v-model="filters.orderState" filterable placeholder="订单状态">
                        <el-option value="-1" label="全部">全部</el-option>
                        <el-option value="0" label="充值中">充值中</el-option>
                        <el-option value="1" label="未支付">未支付</el-option>
                        <el-option value="2" label="支付成功">支付成功</el-option>
                        <el-option value="3" label="支付失败">支付失败</el-option>
                        <el-option value="4" label="充值成功">充值成功</el-option>
                        <el-option value="5" label="充值失败">充值失败</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="filters.remark" placeholder="备注"></el-input>
                </el-form-item>

                <el-form-item label="开始时间">
                    <el-date-picker type="datetime" placeholder="开始时间"  format="yyyy-MM-dd HH:mm:ss"   v-model="filters.startTime" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker type="datetime" placeholder="结束时间"  format="yyyy-MM-dd HH:mm:ss"   v-model="filters.endTime" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="pageGameOrders">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--列表-->
        <template>
            <el-table :data="orders" highlight-current-row v-loading="loading" max-height="620"  @selection-change="selsChange" border  style="width: 100%;">
                <el-table-column  type="selection"  width="50" label="编号">
                </el-table-column>
                <el-table-column prop="orderId" label="外部单号" width="130px" show-overflow-tooltip  >
                </el-table-column>
                <el-table-column prop="mobileOrdersId" label="移动单号" width="130px" show-overflow-tooltip  >
                </el-table-column>
                <el-table-column prop="orderAmount" label="订单金额"  width="110px"  show-overflow-tooltip  >
                </el-table-column>
                <el-table-column prop="orderState" label="订单状态"  width="110px" show-overflow-tooltip   :formatter="formatorderState" >
                    <template slot-scope="scope">
                        <!--订单状态 1 未支付  0 等待支付 2支付成功 3支付失败 4充值成功 5充值失败-->
                        <el-tag :type="scope.row.orderState == 4 ? 'success' : ( scope.row.orderState == 5 ||  scope.row.orderState == 3) ?  'danger' : 'info'"   >{{scope.row.orderState === 4 ? '充值成功': scope.row.orderState === 1 ? '未支付' : scope.row.orderState === 0 ? '充值中' : scope.row.orderState === 5 ? '充值失败' : scope.row.orderState === 2 ? '支付成功' : '未知' }} </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="orderTime" label="创建时间"  show-overflow-tooltip >
                </el-table-column>
                <el-table-column prop="payTime" label="支付时间"     show-overflow-tooltip >
                </el-table-column>
                <el-table-column prop="rechargeTime" label="充值时间"   show-overflow-tooltip >
                </el-table-column>
                <el-table-column prop="remark" label="备注"  show-overflow-tooltip >
                </el-table-column>
                <el-table-column prop="callback" label="回调地址" show-overflow-tooltip   >
                </el-table-column>

                <el-table-column label="操作"  fixed="right"   width="100">
                    <template scope="scope"   >
                        <!--<el-button size="small"   @click="searchSlowOrder(scope.$index, scope.row)">-->
                            <!--订单查询-->
                        <!--</el-button>-->
                        <!--<el-button size="small"   @click="successSlowOrder(scope.$index, scope.row)">-->
                            <!--成功订单-->
                        <!--</el-button>-->
                        <!--<el-button size="small"   @click="failtSlowOrder(scope.$index, scope.row)">-->
                            <!--失败订单-->
                        <!--</el-button>-->
                        <!--<el-button size="small"   @click="orderdetail(scope.$index, scope.row)">-->
                           <!--详情-->
                        <!--</el-button>-->

                        <!--<el-button size="small"   @click="updateOrder(scope.$index, scope.row)">-->
                            <!--更新订单-->
                        <!--</el-button>-->
                        <el-button size="small"   @click="pushgame(scope.$index, scope.row)">
                            推送结果
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>
        </template>
        <el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total,sizes,prev, pager, next"
                :total="total">
        </el-pagination>

    </section>

</template>
<script>
    import { pageGameOrders , pushgame} from '../../api/api';
    //import NProgress from 'nprogress'
    import moment from 'moment';
    var crypto = require('crypto');
    export default {
        data() {
            return {
                filters: {
                    startTime:  moment(new Date(),"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD') + " 00:00:00",
                    endTime:'',
                    remark : '',
                    orderId : '',
                    orderAmount: '',
                    orderState: '',
                },
                fileList: [],
                isShowSupper:JSON.parse(sessionStorage.getItem("user")).usertype === 2 ? true : false,
                start:0,
                pageSize:10,
                total:0,
                loading: false,
                info:[],
                citys:[],
                orders:[],
                sels:[],
                importFormVisible: false,
                importFormLoading: false,
                importFormRules: {
                },
                importForm: {

                },
            }
        },
        methods: {
            formatorderState: function (row, column) {
//                    <el-option value="0" label="等待支付">等待支付</el-option>
//                    <el-option value="1" label="未支付">未支付</el-option>
//                    <el-option value="2" label="支付成功">支付成功</el-option>
//                    <el-option value="3" label="支付失败">支付失败</el-option>
//                    <el-option value="4" label="充值成功">充值成功</el-option>
//                    <el-option value="5" label="充值失败">充值失败</el-option>
                return row.orderState == 1 ? '未支付' : row.orderState == 2 ? ' 支付成功 ' :  row.orderState == 3 ? '支付失败' : row.orderState == 5 ? '充值失败'
                    : row.orderState == 4 ? '充值成功 ' :  row.orderState == 0 ? '等待支付 '  : "未知";
            },
            handleAdd:function(){
                this.addFormVisible = true;
            },
            pageGameOrders: function () {
                let para = {
                    start:this.start,
                    pageSize:this.pageSize,
                    startTime: this.filters.startTime?  moment(this.filters.startTime,"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD HH:mm:ss') : '',
                    endTime: this.filters.endTime == '' ? '' : moment(this.filters.endTime,"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD HH:mm:ss'),
                    remark : this.filters.remark,
                    orderId : this.filters.orderId,
                    orderAmount: this.filters.orderAmount,
                    orderState: this.filters.orderState == '-1' ? '' : this.filters.orderState,
                };
                pageGameOrders(para).then(datas => {
                    this.loading = false;
                    let { message, code, data } = datas;
                    if (code !== "0") {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    } else {
                        this.orders = data.result;
                        this.total = data.totalCount;
                    }
                }).catch(e =>{

                });
            },handleCurrentChange:function(val){
                this.start = val - 1;
                this.pageGameOrders();
            },
            handleSizeChange:function(val){
                this.pageSize = val;
                this.pageGameOrders();
            } ,selsChange: function (sels) {
                this.sels = sels;
            }
            ,pushgame(index, row){
                this.$confirm('确认推送订单吗？', '提示', {}).then(() => {
                    let para = {
                        mobileOrdersId: row.mobileOrdersId
                    };
                    pushgame(para).then((datas) => {
                        this.listLoading = false;
                        let {message, code, data} = datas;
                        if (code !== "0") {
                            this.$message({
                                message: message,
                                type: 'error'
                            });
                        }
                        this.$message({
                            message: message,
                            type: 'info'
                        });
                    });
                });
            }
        },

        mounted() {
            this.pageGameOrders();
        },
        beforeCreate: function (){
//            window.location.reload();
        }
    };

</script>

<style scoped>

</style>
